<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/index.css">
		<script src="js/vue.min.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/mycommon.js"></script>
		<style>
			body {
				margin: 0px;
			}

			.el-header,
			.el-aside,
			.el-main {
				text-align: center;
			}

			.el-header {
				line-height: 60px;
				padding: 0px;
				background-color: #B3C0D1;
				font-size: 35px;

			}

			.el-aside {
				position: fixed;
				bottom: 0px;
				top: 61px;
				background-color: #ffffff;
			}

			.el-main {
				position: fixed;
				right: 0px;
				left: 200px;
				top: 61px;
				bottom: 0px;
				background-color: #E9EEF3;
			}

			.img1 {
				width: 50px;
				height: 50px;
				position: absolute;
				left: 10px;
				top: 5px;
			}

			#a1 {
				position: absolute;
				left: 80px;
				top: 0px;
			}

			#a2 {
				position: absolute;
				left: 1400px;
				top: 0px;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			<el-container>
				<el-header>
					<img src="img/LOGO.png" class="img1" />
					<span id="a1">药品信息管理系统</span>
					<span id="a2"><a href="Login.html"><i class="el-icon-switch-button">退出登录</i></a></span>
				</el-header>
				<el-container>
					<el-tree @node-click="handleNodeClick" class="filter-tree" :data="data" :props="defaultProps"
						default-expand-all :filter-node-method="filterNode" ref="tree">
					</el-tree>
					<el-main>
						<iframe style="height: 99%;width: 100%" id="ifr" src="" frameborder="0"></iframe>
					</el-main>
				</el-container>
			</el-container>
		</div>
		<script>
			new Vue({
				el: "#box1",
				data: {
					activeIndex: '1',
					activeIndex2: '1',
					filterText: '',
					data: [{
						id: 1,
						label: '药品基础信息',
						children: [{
							id: 4,
							label: '药品信息',
							href: "yaopin.html"
						}]
					}, {
						id: 2,
						label: '个人中心',
						children: [{
							id: 5,
							label: '用户信息',
							href: "User.html"
						}]
					}, {
						id: 2,
						label: '药品分类',
						children: [{
							id: 5,
							label: '分类',
							href: "yaopinfenlei.html"
						}]
					}, {
						id: 3,
						label: '药品库存信息',
						children: [{
							id: 7,
							label: '药品库存',
							href: "http://www.taobao.com"
						}]
					}, {
						id: 4,
						label: '零售信息',
						children: [{
							id: 10,
							label: '联想',
							href: "http://www.taobao.com"
						}, {
							id: 11,
							label: '华硕',
							href: "http://www.taobao.com"
						}]
					}, {
						id: 5,
						label: '处方药管理',
						children: [{
							id: 12,
							label: '中药',
							href: "http://www.taobao.com"
						}, {
							id: 13,
							label: '西药',
							href: "http://www.taobao.com"
						}]
					}, {
						id: 6,
						label: '效期提示',
						children: [{
							id: 14,
							label: '联想',
							href: "http://www.taobao.com"
						}, {
							id: 15,
							label: '华硕',
							href: "http://www.taobao.com"
						}]
					}, {
						id: 7,
						label: '库存预警',
						children: [{
							id: 16,
							label: '联想',
							href: "http://www.taobao.com"
						}, {
							id: 17,
							label: '华硕',
							href: "http://www.taobao.com"
						}]
					}, {
						id: 8,
						label: '缺货信息',
						children: [{
							id: 18,
							label: '联想',
							href: "http://www.taobao.com"
						}, {
							id: 19,
							label: '华硕',
							href: "http://www.taobao.com"
						}]
					}, {
						id: 9,
						label: '缺货信息',
						children: [{
							id: 20,
							label: '联想',
							href: "http://www.taobao.com"
						}, {
							id: 21,
							label: '华硕',
							href: "http://www.taobao.com"
						}]
					}, {
						id: 10,
						label: '药品销售记录',
						children: [{
							id: 22,
							label: '销售记录',
							href: "saleaddress.html"
						}, {
							id: 23,
							label: '宋寻',
							href: "AAA.html"
						}]
					}],
					defaultProps: {
						children: 'children',
						label: 'label'
					},
					tableData: [],
					page: 1,
					total: 0,
					pagesize: 1
				},
				watch: {
					filterText(val) {
						this.$refs.tree.filter(val);
					}
				},
				methods: {
					handleSelect(key, keyPath) {
						console.log(key, keyPath);
					},
					filterNode(value, data) {
						if (!value) return true;
						return data.label.indexOf(value) !== -1;
					},
					handleNodeClick(data) {
						if (data.href != undefined) {
							document.getElementById("ifr").src = data.href;
						}
					},
					initdata() {
						axios.get("http://localhost:8080/selectAll/" + this.page).then(function(res) {
							// alert(JSON.stringify(res));
							that.tableData = res.data.data.pageInfo.list;
						}).catch(err => {
							console.log(err)
						});
					},
					//分页
					handleCurrentChange(val) {
						//当前页面
						this.page = val;
						//重新加载数据
						this.initdata()
					}
				},
				mounted() {
					//vue生命周期的方法
					//发送ajax请求到后端接口，获取json数据
					this.initdata();
				}
			})
		</script>
	</body>
</html>